<template>
  <div class="post-list-container">
    <h2 class="page-title">我发布的帖子</h2>

    <!-- 帖子列表 -->
    <el-card shadow="hover" class="post-list-card">
      <el-table
        :data="pagedNotices"
        border
        stripe
        style="width: 100%"
        empty-text="暂无帖子"
      >
        <el-table-column prop="title" label="标题" min-width="200">
          <template #default="{ row }">
            <el-link type="primary" @click="showDetail(row)">
              {{ row.title }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="发布时间"
          width="200"
          align="center"
        >
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-popconfirm
              title="确定要删除这条帖子吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="deleteNotice(row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small" plain>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="notices.length"
          :page-size="pageSize"
          v-model:current-page="currentPage"
        />
      </div>
    </el-card>

    <!-- 帖子详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      width="60%"
      align-center
      :title="selectedNotice?.title"
    >
      <div v-if="selectedNotice">
        <el-descriptions :column="1" border size="large" class="notice-detail">
          <el-descriptions-item label="联系方式">
            {{ selectedNotice.contact || "无" }}
          </el-descriptions-item>
          <el-descriptions-item label="简要描述">
            {{ selectedNotice.summary || "暂无描述" }}
          </el-descriptions-item>
          <el-descriptions-item label="详细内容">
            <div style="white-space: pre-wrap; line-height: 1.8; color: #444">
              {{ selectedNotice.content }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="发布时间">
            {{ formatDate(selectedNotice.created_at) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "@/utils/api";

// 当前用户
const student_id = localStorage.getItem("student_id");

// 帖子列表
const notices = ref([]);
const currentPage = ref(1);
const pageSize = 6; // 每页6条

// 弹窗
const dialogVisible = ref(false);
const selectedNotice = ref(null);

// 获取所有帖子
const fetchNotices = async () => {
  try {
    const res = await api.get(`/student/${student_id}/notices`, {
      headers: { auth: true },
    });
    if (res.data.code === 200) {
      notices.value = res.data.data;
    } else {
      ElMessage.error("加载帖子失败");
    }
  } catch (err) {
    console.error(err);
    ElMessage.error("无法连接服务器");
  }
};

// 分页数据
const pagedNotices = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return notices.value.slice(start, start + pageSize);
});

// 删除帖子
const deleteNotice = async (id) => {
  try {
    const res = await api.delete(`/delete/notice/${id}`, {
      headers: { auth: true },
    });
    if (res.data.code === 200) {
      ElMessage.success("删除成功");
      await fetchNotices();
    } else {
      ElMessage.error("删除失败");
    }
  } catch (err) {
    console.error(err);
    ElMessage.error("删除出错");
  }
};

// 显示详情
const showDetail = (notice) => {
  selectedNotice.value = notice;
  dialogVisible.value = true;
};

// 格式化时间
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString();
};

onMounted(() => {
  fetchNotices();
});
</script>

<style scoped>
.post-list-container {
  padding: 30px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.post-list-card {
  border-radius: 16px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.notice-detail {
  margin-top: 20px;
}
</style>
